<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";

export default {
  name: 'homeIndex',
  data() {
    return {
      workBarChart: null,
      workPieChart: null,
      workLineChart: null,
      value: new Date(),
      tableData: [{
        date: '2016-05-02',
        typeName: '请假单',
        typeHead: '请',
        color: '#335A82',
        name: '今天',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '今天',
        typeName: '报销单',
        typeHead: '报',
        color: '#e6a23c',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '昨天',
        typeName: '课题研究报告',
        typeHead: '课',
        color: '#3a8ee6',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '上周',
        typeName: '教学报告',
        typeHead: '教',
        color: 'pink',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    workBar() {
      // 基于准备好的dom，初始化echarts实例
      this.workBarChart = echarts.init(this.$refs.workBar);
      const option = {
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        grid: {
          left: 60,
          right: 20,
          top: 20,
          bottom: 20
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70,],
            barWidth: 40,
            type: 'bar'
          }
        ]
      };
      option && this.workBarChart.setOption(option);
    },
    workLine() {
      this.workLineChart = echarts.init(this.$refs.workLine);
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 60,
          right: 20,
          top: 20,
          bottom: 20
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          },
          {
            data: [720, 832, 801, 734, 1090, 1130, 1020],
            type: 'line',
            smooth: true
          },
          {
            data: [220, 432, 701, 1134, 1290, 1430, 620],
            type: 'line',
            smooth: true
          },
          {
            data: [1500, 1400, 1000, 700, 600, 500, 100],
            type: 'line',
            smooth: true
          }
        ]
      };

      option && this.workLineChart.setOption(option);
    },
    workPie() {
      this.workPieChart = echarts.init(this.$refs.workPie);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && this.workPieChart.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.workBar()
      this.workLine()
      this.workPie()
    })
  },
  created() {

  }
}
</script>

<template>
  <div class="worker_box">
    <div class="worker_ple">
      <div class="worker_img_name">
        <div class="worker_img">
          <img src="@/assets/man.png">
        </div>
        <div class="worker_name">
          <div class="worker_name_text">林厚芳,上午好！</div>
          <div>剩余年假： 4.5天</div>
        </div>
      </div>
      <div class="worker_nav">
        <div class="one_worker_nav">
          <div class="one_worker_nav_img">
            <img src="@/assets/tsg.png">
          </div>
          <div class="one_worker_nav_text">图书馆</div>
        </div>
        <div class="one_worker_nav">
          <div class="one_worker_nav_img">
            <img src="@/assets/x.png">
          </div>
          <div class="one_worker_nav_text">视角观点</div>
        </div>
        <div class="one_worker_nav">
          <div class="one_worker_nav_img">
            <img src="@/assets/777.png">
          </div>
          <div class="one_worker_nav_text">继续教育</div>
        </div>
        <div class="one_worker_nav">
          <div class="one_worker_nav_img">
            <img src="@/assets/set.png">
          </div>
          <div class="one_worker_nav_text">编辑模式</div>
        </div>
      </div>
    </div>
    <div class="worker">
      <div class="worker_left">
        <div class="worker_left_notice">
          <img src="@/assets/gg.png">
          <span>关于2024年度 调整住房公积金缴存比例的通知</span>
        </div>
        <div class="worker_left_sp">
          <img src="@/assets/sp.png">
          <span>您发出 年休假 申请已经审批通过</span>
        </div>
        <div class="work_left_top">
          <div class="worker_title">
            <span>审批事项</span>
            <span style="color: #2f8cec; text-decoration: underline;cursor: pointer">更多 >></span>
          </div>
          <div class="worker_num">
            <template>
              <el-table
                  :show-header="false"
                  :data="tableData"
                  style="width: 100%">
                <el-table-column
                    prop="date"
                    label='类型'>
                  <template slot-scope="scope">
                    <div class="type_div">
                      <div class="type_class" :style="{ background: scope.row.color }">{{ scope.row.typeHead }}</div>
                      <div class="type_div_text">
                        <div class="type_div_text_name">{{ scope.row.typeName }}</div>
                        <div class="type_div_text_ple">李一可</div>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    width="80"
                    label="姓名">
                </el-table-column>
<!--                <el-table-column width="100">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                        size="mini"-->
<!--                        @click="handleEdit(scope.$index, scope.row)">查看</el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
              </el-table>
            </template>
          </div>
        </div>
        <div class="work_left_center">
          <div class="worker_title">
            <span>最近文档</span>
            <span style="color: #2f8cec; text-decoration: underline;cursor: pointer"">更多 >></span>
          </div>
          <div class="worker_work">
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/PDF.png" alt="" />
              </div>
              <div class="worker_one_work_title">xxxx.pdf</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/WORD.png" alt="" />
              </div>
              <div class="worker_one_work_title">xxxx.docx</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/WORD.png" alt="" />
              </div>
              <div class="worker_one_work_title">xxxx.docx</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/WORD.png" alt="" />
              </div>
              <div class="worker_one_work_title">xxxx.docx</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/ppt.png" alt="" />
              </div>
              <div class="worker_one_work_title">语文第三课课件.ppt</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/ppt.png" alt="" />
              </div>
              <div class="worker_one_work_title">语文第四课课件.ppt</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/excel-01.png" alt="" />
              </div>
              <div class="worker_one_work_title">班级成绩.xslx</div>
            </div>
          </div>
        </div>
        <div class="work_left_center">
          <div class="worker_title">
            <span>全部功能</span>
            <span style="color: #2f8cec; text-decoration: underline;cursor: pointer"">更多 >></span>
          </div>
          <div class="worker_work">
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/qjd.png" alt="" />
              </div>
              <div class="worker_one_work_title">请假</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/da.png" alt="" />
              </div>
              <div class="worker_one_work_title">档案</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/tike.png" alt="" />
              </div>
              <div class="worker_one_work_title">题库</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/bk.png" alt="" />
              </div>
              <div class="worker_one_work_title">补卡</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/tj.png" alt="" />
              </div>
              <div class="worker_one_work_title">统计</div>
            </div>
          </div>
        </div>
        <div class="work_left_center">
          <div class="worker_title">
            <span>一网通办</span>
            <span style="color: #2f8cec; text-decoration: underline;cursor: pointer"">更多 >></span>
          </div>
          <div class="worker_work">
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/qjd.png" alt="" />
              </div>
              <div class="worker_one_work_title">请假单</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/bk.png" alt="" />
              </div>
              <div class="worker_one_work_title">用章单</div>
            </div>
            <div class="worker_one_work">
              <div class="worker_one_work_img">
                <img src="@/assets/tj.png" alt="" />
              </div>
              <div class="worker_one_work_title">报销单</div>
            </div>
          </div>
        </div>
        <div class="work_left_bottom">
          <div class="worker_title">上课统计</div>
          <div class="work_bar" ref="workBar"></div>
        </div>
        <div class="work_left_line">
          <div class="worker_title">数据统计</div>
          <div class="work_line" ref="workLine"></div>
        </div>
      </div>
      <div class="worker_right">
        <div class="worker_right_bottom">
          <div class="worker_title">我的日程</div>
          <div class="work_pie" >
            <el-calendar v-model="value">
            </el-calendar>
          </div>
        </div>
        <div class="worker_right_center">
          <div class="worker_title">数据统计</div>
          <div class="work_pie" ref="workPie"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.worker_box {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
box-sizing: border-box;
}

.worker_ple {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding:10px 30px;
  margin-bottom: 10px;
  background: #FFFFFF;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

  .worker_img_name {
    width: 100%;
    height: 150px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;

    .worker_img {
      width: 120px;
      height: auto;
      box-sizing: border-box;
      padding-right: 20px;

      & > img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }

    .worker_name {
      width: auto;
      height: auto;
      font-size: 18px;

      .worker_name_text {
        width: auto;
        font-size: 24px;
        font-weight: bold;
        color: #335A82;
        margin-bottom: 10px;
      }
    }
  }


  .worker_nav {
    width: 100%;
    height: 150px;
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    align-items: center;
    box-sizing: border-box;
    padding-right: 30px;
    justify-content: space-between;

    .one_worker_nav {
      width: auto;
      height: auto;
      cursor: pointer;

      .one_worker_nav_img {
        width: 90px;
        height: 90px;
        margin-bottom: 10px;

        & > img {
          width: 90px;
          height: 90px;
        }
      }

      .one_worker_nav_text {
        width: 100%;
        height: auto;
        font-size: 16px;
        text-align: center;
      }
    }
  }
}

.worker {
  width: 100%;
  height: auto;
  padding: 10px;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
}

.worker_left {
  width: calc(100% - 400px);
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:40px;
  gap: 20px;
  box-sizing: border-box;
  padding-right: 20px;

  .worker_left_notice {
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: #335A82;
    box-sizing: border-box;
    background: #FFFFFF;
    padding: 10px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    & > img {
      width: 30px;
      height: auto;
      margin-right: 10px;
    }
  }

  .worker_left_sp {
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: #335A82;
    box-sizing: border-box;
    background: #FFFFFF;
    padding: 10px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    & > img {
      width: 30px;
      height: auto;
      margin-right: 10px;
    }
  }

  .work_left_top {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    .worker_num {
      width: 100%;
      display: flex;
      display: -moz-flex;
      display: -webkit-flex;
      box-sizing: border-box;
      padding: 0 10px;

      .worker_one_num {
        flex: 1;

        .worker_one_num_title {
          width: 100%;
          height: auto;
          font-size: 16px;
          color: #6a6666;
          text-align: center;
          margin-bottom: 10px;
        }
      }
    }
  }

  .work_left_center {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    .worker_work {
      width: 100%;
      height: auto;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 0 20px;

      .worker_one_work {
        width: 100px;
        flex-basis: 100px;
        flex-shrink: 0;
        height: auto;
        background: rgb(210, 222, 234, 0.1);
        box-sizing: border-box;
        padding: 10px;
        cursor: pointer;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        margin-right: 20px;

        .worker_one_work_title {
          width: 100%;
          height: auto;
          text-align: center;
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }

  .work_left_bottom {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    .work_bar {
      width: 100%;
      height: 250px;
    }
  }

  .work_left_line {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    .work_line {
      width: 100%;
      height: 350px;
    }
  }
}

.worker_right {
  height: auto;
 width:  400px;
  overflow: auto;

  .worker_right_top {
    width: 100%;
    height: 360px;
    box-sizing: border-box;
    padding: 20px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);
    margin-bottom: 20px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-direction: column;

    .notice_announcement {
      width: 100%;
      height: 100%;
      overflow: auto;

      .one_notice {
        width: 100%;
        height: auto;
        font-size: 14px;
        box-sizing: border-box;
        padding: 5px 10px;
        border-bottom: 1px solid #eeeeee;
      }
    }
  }

  .worker_right_center {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);
    margin-bottom: 20px;

    .work_pie {
      width: 100%;
      height: 350px;
    }
  }

  .worker_right_bottom {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 20px 0;
    margin-bottom: 20px;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);

    .work_pie {
      width: 100%;
      height:auto;
    }
  }


}

.worker_title {
  width: 100%;
  height: auto;
  font-size: 18px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: space-between;
  border-left: 10px solid #4E81B4;
  font-weight: bolder;
  margin-bottom: 20px;
}

.worker_one_work_img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding:10px 10px 0;

  & > img {
    width: 100%;
    height: auto;
  }
}

.type_div {
  width: 100%;
  height: auto;
  display: flex;
  display: -moz-flex;
  align-items: center;
  display: -webkit-flex;

  .type_class {
    width: 60px;
    text-align: center;
    height: 70px;
    line-height: 70px;
    background: #335A82;
    color: #FFFFFF;
    font-size: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(190, 211, 232, 0.3);
  }

  .type_div_text {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-left: 20px;

    .type_div_text_name {
      color: #335A82;
      font-size: 18px;
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 6px;
      text-decoration: underline;
    }

    .type_div_text_ple {
      color: #777777;
      font-size: 14px;
    }
  }
}
</style>
